<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="renderer" content="webkit">
		<title></title>
		<link rel="stylesheet" th:href="@{/css/pintuer.css}">
		<link rel="stylesheet" th:href="@{/css/admin.css}">
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
		<style>
			.layui-form-label {
			    width: 100px;
			}
			
			.layui-input-block {
			    margin-left: 130px;
			}
		</style>
	</head>

	<body>
		<div class="bg panel admin-panel">
			<div class="panel-head">
				<strong class="icon-paper-plane-o"> 资源上传</strong>
			</div>
			<div class="padding border-bottom">
				<h1 class="text-center">将文件拖到此处，或点击上传，小于1000MB(请不要上传电子书等存在侵权的资源哦!)
</h1>
				<div style="width: 100%;height:150px;" class="layui-upload-drag" id="test1">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
					<div class="layui-hide" id="test10">
						<hr>
						<img src="" alt="上传成功后渲染" style="max-width: 196px">
					</div>
				</div>
			</div>
			<div class="padding border-bottom">
			<form class="layui-form" style="width: 100%;margin-top: 20px;">
				<div class="layui-form-item layui-form-text">
				    <label class="layui-form-label"><span style="color:red">*</span>资源名称:</label>
				    <div class="layui-input-block">
				      <input type="text" id="title" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-form-text">
				    <label class="layui-form-label">资源描述:</label>
				    <div class="layui-input-block">
				      <textarea id="description" name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
				    </div>
			  	</div>
			  	<div class="layui-form-item layui-inline" >
				    <label class="layui-btn layui-form-label">资源分类</label>
				    <div class="layui-input-block">
				      <select id="filegroupId" name="filegroupId" lay-verify="required" lay-search="" style="width: 195px;"  >
				       <!-- <option value=""></option>-->
				        <option th:each="filegroup:${filegroups}" th:value="${filegroup.getFilegroupId()}" th:text="${filegroup.getFgname()}"></option>
				      </select>
				    </div>
  				</div>
				<div class="layui-form-item layui-form-text layui-inline">
					<label class="layui-btn layui-form-label">价格:</label>
					<div class="layui-input-block" >
						<select id="price" name="price" lay-verify="required" lay-search="" style="width: 195px;"  >
							 <option th:each="i:${#numbers.sequence(0,5)}" th:value="${i*10}" th:text="${i*10}+积分"></option>
						</select>
					</div>
				</div>
				<div class="layui-form-item layui-form-text layui-inline">
					<label class="layui-btn layui-form-label" th:onclick="chuang()">创建分类:</label>
					<div class="layui-input-block" >
						<input type="text" id="fgname" name="fgname" style="display:inline;width: 195px;" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
  			</form>
  			<p style="text-align: center;">
  				<button id="btn" class="layui-btn layui-btn-normal layui-btn-fluid ">提交</button></p>
			</div>
			
		</div>
	</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/file/fileupload' //上传接口
    ,accept: 'file' //允许上传的文件类型
  	,size: 1048576 //最大允许上传的文件大小
	,drag: true
	,auto:false
	,bindAction:'#btn'
	,
	//上传前的回调
	before: function () {
		this.data = {
			'title': $('#title').val(),
			'description': $('#description').val(),
			'filegroupId':$('#filegroupId').val(),
			'price':$('#price').val()
		};
		console.log(this.data);  //查看是否成功获得数据
	}
    ,done: function(res){
      //上传完毕回调
          if (res == 'error'){
              alert("标题不能为空")
          }else {
              window.location.href="/file/data_file"
          }
    }
    ,error: function(){
      //请求异常回调
		  alert("上传异常");
    }
  });
});
	layui.use('form', function() {
			var form = layui.form;
			form.render();
		});
</script>
	<script th:inline="javascript">
		function chuang() {
			var fgname=$("#fgname").val();
		/*	window.location.href="/file/newGroup?fgname="+fgname;*/
			$.ajax({
				type:'post',
				url:'/file/newGroup',
				data:{"fgname":fgname},
				dataType: "text",
				async: false,
				success:function (data) {

					console.log(data);
                    window.location.href="/file/data_file";
					/*if (data == 1){

					}*/
				},
				error:function () {
					alert("创建失败");
				}
			});
		}

	</script>
</html>